<template>
  <div class="center-in-center">

    <div style="margin-top: 5%;text-align: center">
      <a-button id="statButton" v-show="myselfVisible" @click="openFiles()"></a-button>

      <div v-if="visibleFiles&&statistics" style="width: 100%">
        <div>
          <div style="width: 50%;display: inline-block">
            <div style="width: 40%;display: inline-block">
              <a-statistic :precision="1" :value="statistics.value.totalVisitNum">
                <template #title>
                  <span style="color: orangered">总项目数</span>
                </template>
                <template #suffix>
                  <fire-outlined style="color: orangered"/>
                </template>
              </a-statistic>
            </div>
            <div style="width: 40%;display: inline-block;margin-left: 15%">
              <a-statistic :precision="1" :value="statistics.value.activeVisitNum">
                <template #title>
                  <span style="color: forestgreen">活跃项目数</span>
                </template>
                <template #suffix>
                  <loading-outlined style="color: forestgreen"/>
                </template>
              </a-statistic>
            </div>
          </div>
        </div>
        <a-divider></a-divider>
        <div style="margin-top: 5%">
          <div style="width: 50%;display: inline-block">
            <div style="width: 40%;display: inline-block">
              <a-statistic :precision="0" :value="statistics.value.totalUserNum">
                <template #title>
                  <span style="color: cornflowerblue">总用户数</span>
                </template>
                <template #suffix>
                  <user-outlined style="color: cornflowerblue"/>
                </template>
              </a-statistic>
            </div>
            <div style="width: 40%;display: inline-block;margin-left: 15%">
              <a-statistic :precision="0" :value="statistics.value.totalConsultNum">
                <template #title>
                  <span style="color: orange">总咨询开展次数</span>
                </template>
                <template #suffix>
                  <message-outlined style="color: orange"/>
                </template>
              </a-statistic>
            </div>
          </div>
        </div>
      </div>
      <!--      <div  v-for="(item,index) in itemList" style="width: 100%">-->
      <!--      <a :href=itemFileInfo.url :download=itemFileInfo.name>file:{{ itemFileInfo.name }}</a>-->
      <!--      </div>-->
      <a-divider></a-divider>
      <div style="margin-top: 5%">
        <a-tooltip placement="right">
          <template #title>
            <span>您拥有查看所有报告的权限！</span>
          </template>
          <a-button v-show="myselfVisible2" @click="getFileList">
            <a-badge dot>点击查询所有结案报告&ensp;</a-badge>
          </a-button>
        </a-tooltip>
        <div v-if="visibleFiles">
          <a-list item-layout="horizontal" :data-source="itemList">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <a :href=item.url :download=item.name style="color: orangered">file:&ensp;{{ item.name }}</a>
                  </template>
                  <template #description>
                    {{ item.url }}
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
          <!--          <div v-for="(item,index) in itemList" style="width: 100%">-->
          <!--            <a :href=item.url :download=item.name>file{{ index }}:{{ item.name }}</a>-->
          <!--          </div>-->
        </div>
      </div>
    </div>
  </div>

</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {
  post, setLocalToken,
  get,
  del,
  getBlob,
  tip,
  removeLocalToken,
  getLocalToken,
} from "@/common";
import {useRouter} from "vue-router";
import {message} from "ant-design-vue";
////////////////////////////////////////////
////////////////////////////////////////////


const getStat = () => {
  get("/stat/getStat").then((res) => {
    console.log("已更新系统数据" + res.data);
    statistics.value = res.data;
    console.log("value:" + statistics.value.totalVisitNum)
    document.getElementById('statButton').click();
  })
}

getStat()
const statistics = reactive({});

const visibleFiles = ref(false);
const myselfVisible = ref(true);
const openFiles = () => {
  visibleFiles.value = true;
  myselfVisible.value = false;
}

// const linkList = ref("")
// linkList.value = [{
//   stat: "wdnmd",
//   name: "wdnmd"
// },
//   {
//     stat: "wdnmd1",
//     name: "wdnmd1"
//   }]

const myselfVisible2 = ref(true)
const getFileList = () => {
  for (let i = 0; i < visitList.length; i++) {
    getFileReport(visitList[i])
  }
  myselfVisible2.value = false;
}
const fileList = ref([]);
const file = ref("");
const itemFileInfo = reactive({
  name: "",
  url: ""
})


const itemList = ref([]);


const getFileReport = (visit_id) => {
  let temp = reactive("");

  // itemFileInfo.name = visit_id + ".xls";
  function getFileName(visit_id) {
    get("/stat/getFileName?visit_id=" + visit_id).then((res) => {
      console.log("文件名为:" + res.data)
      temp = res.data;
    })
  }

  getFileName(visit_id);
  getBlob(
      "stat/getVisitXlsFile?visit_id=" + visit_id,
      {},
      {loading: false}
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      file.value = reader.result;
    });
    reader.readAsDataURL(blob);
    let urlTemp = URL.createObjectURL(blob);
    // temp = itemFileInfo.url
    fileList.value.push(file.value);
    itemList.value.push({
      name: temp,
      url: urlTemp
    });
    console.log("新增一个文件:" + temp)
  });
};

let visitList = [];
const getItemList = () => {
  get("/stat/getItemList").then((res) => {
    visitList = res.data;
    console.log(visitList)
  })
}
getItemList();

////////////////////////////////////////////
</script>

<style>
{
  margin: 0
;
  padding: 0
;
  background-color: #EAEAEA
;
}
.center-in-center {
  width: 30%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>